<template>
  <div class="app-container">

    <!--  1-搜索框             -->
    <el-col :span="24" class="toolbar" style="padding-bottom: 0px;">
      <el-form :inline="true" >

        <el-form-item>
          <el-input placeholder="品种名称" v-model="searchName"></el-input>
        </el-form-item>

        <el-form-item>
          <el-button type="primary" @click="doFilter()"><i class="el-icon-search"></i>搜索</el-button>
        </el-form-item>

        <!--&lt;!&ndash; 新增试验田条目信息按钮  &ndash;&gt;-->
        <!--<el-form-item>-->
          <!--<el-button type="primary" @click="addFarmMsg()">新增</el-button>-->
        <!--</el-form-item>-->

      </el-form>
    </el-col>

    <!-- 2-列表              -->
    <el-table :data="tableList" max-height="550" v-loading="listLoading" border element-loading-text="拼命加载中" style="width: 100%;">
      <el-table-column prop="speciesId" label="品种ID">
      </el-table-column>

      <el-table-column prop="blockId" label="试验ID">
      </el-table-column>


      <el-table-column prop="operation" label="操作 ">
        <template slot-scope="scope">

          <el-button size="mini" type="success" @click="getInCommontest(scope.row)">进入</el-button>

          <!--<el-button size="small" type="danger" @click="deleteUpdate(scope.row)">删除</el-button>-->

        </template>
      </el-table-column>

    </el-table>


    <!--  3-分页插件的工具条                 -->
    <el-pagination layout="total, prev, pager, next"
                   background
                   :page-size="10"
                   @size-change="handleSizeChange"
                   :total="total"
                   @current-change="handleCurrentChange"
                   style="text-align:center;">
    </el-pagination>

    <!-- 5-新增Farmland弹窗详情 -->
    <el-dialog title="Edit1" :visible.sync="isShowAddVisible">

      <el-form label-width="80px" :model="farmName" ref="dataForm">
        <el-form-item label="试验田名称" prop="fname">
          <el-input v-model="farmName"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="isShowAddVisible = false">取消</el-button>
        <el-button type="primary" :loading="listLoading" @click="updateData1(farmName)" class="title1">确定</el-button>
      </div>

    </el-dialog>

    <!-- 6-删除大田弹框                           -->
    <el-dialog
      title="删除"
      :visible.sync="deleteVisible"
      width="30%">
      <span>确认删除吗</span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="deleteVisible = false">取 消</el-button>
        <el-button type="primary" @click="submitDelete">确 定</el-button>
      </span>
    </el-dialog>

    <!-- 7-新增大田信息 -->

  </div>
</template>


<script>
  import { addFarm,getFarmList,deleteFarm } from '../../api/FarmManager'
  import { getInnerSpeciesByFieldId, getInnerBlockByFieldId } from '../../api/block'

  export default {

    data() {
      return {
        tableList: [],
        listLoading: true,
        isShowEditVisible: false,
        isShowAddVisible: false,
        deleteVisible: false,
        temp: {
          uid: '',
          cname: '',
          date: '',
          status: ''
        },
        total: 0,
        page: 1,
        pageSize: 10,
        status: [
          {
            statusId: 1,
            label: '启用'
          }, {
            statusId: 0,
            label: '禁用'
          }
        ],

        value: '',
        searchName: '',
        filterTableDataEnd: []
      }
    },

    created() {
      // 刚打开页面时就去取数据；
      this.fetchData()
    },

    filters: {
      statusFilter(status) {
        const statusMap = {
          1: 'success',
          2: 'danger'
        }
        return statusMap[status]
      }
    },

    methods: {
      // 新增farmland更新数据
      updateData1( farmName ) {
        this.listLoading = true
        addFarm({'name': farmName }).then(response => {
          this.fetchData()
        })
        this.isShowAddVisible = false
        this.$notify({
          title: '成功',
          message: '添加成功',
          type: 'success',
          duration: 2000
        })
      },
      getInCommontest( blockMsg ) {
        this.GLOBAL.species.testId = blockMsg.blockId
        console.log('AAAAAAA' + blockMsg.blockId )
        this.$router.push('/commontest')
      },

      fetchData() {
        this.listLoading = true
        // getInnerSpeciesByFieldId(this.GLOBAL.field.fieldId).then(response => {
        //   const limit = 10
        //   this.total = response.data.data.num
        //   const speciesMsg = [{}]
        //   const speciesId = response.data.data.speciesId
        //   for (var i = 0; i < this.total; i++) {
        //     speciesMsg[i] = { 'speciesId': speciesId[i] }
        //   }
        //   console.log(speciesMsg)
        //   const pageList = speciesMsg.filter((item, index) => index < limit * this.page && index >= limit * (this.page - 1))
        //   console.log(pageList)
        //
        //   this.tableList = pageList
        //   this.listLoading = false
        // })

        getInnerBlockByFieldId(this.GLOBAL.field.fieldId).then(response => {
          const limit = 10
          const pageList = response.data.rows.filter((item, index) => index < limit * this.page && index >= limit * (this.page - 1))
          // console.log(pageList)
          this.total = response.data.total
          this.tableList = pageList
          this.listLoading = false
        })
      },

      doFilter() {
        if (this.searchName === '') {
          this.fetchData()
          this.$message.warning('查询条件不能为空！')
          return
        }
        console.log(this.searchName)

        this.listLoading = true
        getFarmList({ 'name': this.searchName }).then(response => {
          const limit = 10
          // 居然在前端做筛选，牛逼！
          const pageList = response.data.rows.filter((item, index) => index < limit * this.page && index >= limit * (this.page - 1))
          // console.log(pageList)
          this.total = parseInt(response.data.data.num)
          console.log(parseInt(response.data.data.num))
          this.tableList = pageList
          this.listLoading = false
        })
      },

      clickfun(e) {
        console.log(e.target.innerText)
      },

      handleUpdate(row) {
        this.isShowEditVisible = true
        this.temp = Object.assign({}, row)
        console.log(row)
      },

      addFarmMsg() {
        this.isShowAddVisible = true
        console.log()
      },

      // deleteUpdate(row) {
      //   console.log(row)
      //   this.deleteVisible = true
      //   this.temp = Object.assign({}, row)
      //   this.farmlandId = row.farmlandId
      // },

      // submitDelete() {
      //   const tempData = Object.assign({}, this.temp)
      //   console.log(tempData)
      //   console.log(this.tableList)
      //   for (const v of this.tableList) {
      //     if (v.uid === this.temp.uid) {
      //       const index = this.tableList.indexOf(v)
      //       this.tableList.splice(index, 1)
      //       this.fetchData()
      //       console.log(this.tableList)
      //       break
      //     }
      //   }
      //   deleteFarm({ 'farmlandId': this.farmlandId }).then(response => {
      //     this.fetchData()
      //   })
      //
      //   this.deleteVisible = false
      //   this.$notify({
      //     title: '成功',
      //     message: '删除成功',
      //     type: 'success',
      //     duration: 2000
      //   })
      // },

      handleModifyStatus(row, status) {
        this.$message({
          message: '操作成功',
          type: 'success'
        })
        console.log(row)
        row.status = status
      },

      updateData() {
        const tempData = Object.assign({}, this.temp)
        console.log(tempData)
        updateArticle(tempData).then(() => {
          for (const v of this.tableList) {
            if (v.uid === this.temp.uid) {
              const index = this.tableList.indexOf(v)
              this.tableList.splice(index, 1, this.temp)
              break
            }
          }
          this.isShowEditVisible = false
          this.$notify({
            title: '成功',
            message: '更新成功',
            type: 'success',
            duration: 2000
          })
        })
      },

      handleSizeChange(val) {
        this.page = val
        console.log(this.page)
        this.fetchData()
      },

      handleCurrentChange(val) {
        this.page = val
        console.log(this.page)
        this.fetchData()
      },

      currentChangePage(list) {
        let from = (this.page - 1) * this.pageSize
        const to = this.page * this.pageSize
        this.tableList = []
        for (; from < to; from++) {
          if (list[from]) {
            this.tableList.push(list[from])
          }
        }
      }


    }
  }

</script>

